<script setup lang="ts">
import { ref } from 'vue';
const options: string[] = ['国内-金融低延时', '国际-金融低延时'];
const mapRef: any = ref(null);
const selectedItem = ref('国际-金融低延时');
// 点击切换
const changeLineFn = (value: string) => {
  mapRef.value.changeLatLngShow(value);
  selectedItem.value = value; // 设置选中项
};
</script>

<template>
  <div class="latency-map">
    <div class="rectangle">
      <div class="container">
        <div
          class="content_box"
          v-for="item in options"
          :key="item"
          :class="{ active: selectedItem === item }"
          @click="changeLineFn(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="map_box">
      <!-- 调用全局地图组件 -->
      <LeafletMap ref="mapRef" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.latency-map {
  .rectangle {
    height: 98px;
    background-image: url('@/assets/images/global/design/rectangle_1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .content_box {
        margin: 0 10px;
        width: 190px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #fefcfc;
        border-radius: 5px;
        font-family: 'SourceHanSansCN-Normal';
        font-size: 16px;
        letter-spacing: 0px;
        color: #091f5f;
        &:hover {
          cursor: pointer;
          background-color: #4097ef;
          color: #fff;
        }

        &.active {
          background-color: #4097ef;
          color: #fff;
        }
      }
    }
  }

  .map_box {
    position: relative;
    margin-top: -2px;
    width: 100%;
    height: 800px;
  }
}
</style>
